<template>
    <div id="main">
        <div id="staff_left">
            <div id="L-elem1" class="box">
                <div class="staff_text">部门</div>
                <div class="textBox">
                    <el-table :data="tableData" style="width: 80%" height="238">
                        <el-table-column prop="id" label="组织编码" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="组织名称" align="center">
                        </el-table-column>
                        <el-table-column prop="person" label="负责人" align="center">
                        </el-table-column>
                        <el-table-column prop="num" label="编制人数" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div id="L-elem2" class="box">
                <div class="staff_text">进度图</div>
                <div id="pText">
                    <p v-for="(item, index) in dept" :key="index">{{ item }}</p>
                </div>
                <div id="progress">
                    <el-progress v-for="(item, index) in status" :key="index" stroke-width=18 text-color="white"
                        :percentage="item" :color="customColorMethod"></el-progress>
                </div>
            </div>
        </div>
        <div id="staff_center">
            <div id="C-elem1" class="box">
                <div class="staff_text">人员总数统计</div>
                <div class="count">
                    <el-table :data="numData" style="width: 100%">
                        <el-table-column prop="all" label="总数" align="center">
                        </el-table-column>
                        <el-table-column prop="staff" label="项目管理人员" align="center">
                        </el-table-column>
                        <el-table-column prop="supervisor" label="项目监理人员" align="center">
                        </el-table-column>
                        <el-table-column prop="constructor" label="项目施工人员" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div id="C-elem2" class="box">
                <div class="staff_text">每月人员数量统计</div>
                <div id="lineChart"></div>
            </div>
        </div>
        <div id="staff_right">
            <div id="R-elem1" class="box">
                <div class="staff_text">年龄结构</div>
                <div id="barChart"></div>
            </div>
            <div id="R-elem2" class="box">
                <div class="staff_text">学历结构</div>
                <div id="pieChart"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            staffSum: 0,
            tableData: [],
            numData: [{
                all: 2222,
                staff: 1111,
                supervisor: 555,
                constructor: 665
            }],
            dept: [],
            allStatus: {
                "综合部": 50,
                "财务部": 66,
                "工程部": 80,
                "技术部": 71,
                "安全质量部": 90,
                "商务部": 80,
                "试验室": 55,
            },
            status: [],
            ageData: [1.2, 6.1, 3.6, 7.9, 5.11, 44.2],
            versionTotal: false,
            appVersionName: [],
            charts: "",
            opinionData: ["1590", "1527", "1609", "1678", "1599", ""],
            pieData:[],
        }
    },
    methods: {
        customColorMethod(percentage) {
            if (percentage < 60) {
                return '#f1725e';
            } else if (percentage < 70) {
                return '#0ee4f9';
            } else if (percentage < 80) {
                return '#e6a23c';
            } else if (percentage < 90) {
                return '#909399';
            } else {
                return '#67c23a';
            }
        },
        drawLine(id) {
            // 初始化折线图
            this.charts = echarts.init(document.getElementById(id));
            // 设置折线图数据和样式
            this.charts.setOption({
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    align: "right",
                    left: "3%",
                    top: "15%",
                    data: ["近半年"], // 自定义
                    textStyle: {
                        color: 'white',
                    }
                },

                grid: {
                    top: "30%",
                    left: "5%",
                    right: "5%",
                    bottom: "5%",
                    containLabel: true,
                },

                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },

                // 自定义：设置x轴刻度
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true,
                    },
                    // 自定义标签
                    data: ["2023-12", "2024-01", "2024-02", "2024-03", "2024-04", "2024-05"],
                    axisLine: {//x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            width: 0,
                            type: "solid"
                        }
                    },

                },

                // 自定义：设置y轴刻度
                yAxis: {
                    type: "value",
                    boundaryGap: true,
                    splitNumber: 3,
                    interval: 200,
                    min: 1200,
                    axisLine: {//x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            width: 0,
                            type: "solid"
                        }
                    },
                },

                // 设置数据
                series: [
                    {
                        name: "近半年", // 自定义
                        type: "line",
                        stack: "总量", // 自定义
                        data: this.opinionData, // 自定义
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgb(255,200,213)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#ffffff",
                                    },
                                ],
                                global: false,
                            },
                        },
                        itemStyle: {
                            color: "rgb(255,96,64)",
                            lineStyle: {
                                color: "rgb(255,96,64)",
                            },
                        },
                    },
                ],
            }, true);
        },
        drawBar(id) {
            // 初始化柱状图
            this.charts = echarts.init(document.getElementById(id));
            // 设置柱状图数据和样式
            this.charts.setOption({
                xAxis: {
                    type: 'category',
                    data: ['<25', '25-30', '31-36', '37-42', '43-48', '>48'],
                    axisLine: {//x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            width: 0,
                            type: "solid"
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {//y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "white",
                            width: 0,
                            type: "solid"
                        }
                    },
                    axisLabel: {
                        formatter: '{value} %'
                    }

                },
                series: [
                    {
                        data: this.ageData,
                        type: 'bar',
                        itemStyle: {
                            color: "#91cc75",
                        }
                    }
                ],

            }, true);
        },
        drawPie(id) {
            // 初始化饼状图
            this.charts = echarts.init(document.getElementById(id));
            // 设置饼状图数据和样式
            this.charts.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom',
                    left: '55px',
                    textStyle: {  // 图例文字样式
                        color: '#ffffff'  // 文字颜色设置为白色
                    }
                },
                series: [
                    {
                        name: '学历',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        
                        data:this.pieData,
                        label: {
                            "normal": {
                                "show": true,
                                "textStyle": {
                                    "fontSize": 13
                                }
                            },
                            "emphasis": {
                                // "show": true
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }, true);
        },
        // 获取列表的数据
        loadPost() {
            this.$axios.get(this.$httpUrl + '/staff/countSum').then(res => {
                this.numData[0].all = res.data
                this.opinionData[5] = res.data.toString();
            })
            this.$axios.get(this.$httpUrl + '/dept/getList').then(res => {
                for (var i = 0; i < res.data.length; i++) {
                    this.tableData.push({
                        id: res.data[i]['did'],
                        name: res.data[i]['dname'],
                        person: res.data[i]['sadminname'],
                        num: res.data[i]['dnum'],
                    })
                    this.dept.push(res.data[i]['dname'])
                    this.status.push(this.allStatus[res.data[i]['dname']])
                }
            })
            this.$axios.get(this.$httpUrl + '/staff/countAge').then(res => {
                this.ageData[0] = res.data[0]['count']
                this.ageData[5] = res.data[1]['count']
                for (var i = 1; i < 5; i++) {
                    this.ageData[i] = res.data[i + 1]['count']
                }
            })
            this.$axios.get(this.$httpUrl + '/staff/countPost').then(res => {
                        this.numData[0].staff=res.data[2]['value'],
                        this.numData[0].supervisor= res.data[1]['value'],
                        this.numData[0].constructor= res.data[0]['value']
                
            })
            this.$axios.get(this.$httpUrl + '/staff/countDegrees').then(res => {
                for (var i = 0; i < res.data.length; i++) {
                    this.pieData.push({
                        name: res.data[i]['degrees'],
                        value: res.data[i]['value'],
                        
                    })
                }
            })
        },
    },
    mounted() {
        this.$nextTick(function () {
            this.loadPost();
            setTimeout(() => {
                this.drawPie("pieChart");
                this.drawLine("lineChart");
                this.drawBar("barChart");
            }, 100)
            
        })
    },


}
</script>
<style scoped>
@import '../../assets/css/StaffMain.css';

.textBox /deep/ .el-table,
.el-table__expanded-cell {
    background-color: transparent;
}

.textBox /deep/ .el-table th {
    color: #fefefe;
    background-color: rgba(0, 0, 0, 0.5);
}

.textBox /deep/ .el-table tr {
    color: #fefefe;
    background-color: transparent !important;
}

.textBox /deep/ .el-table__body tr:hover>td {
    background-color: rgba(49, 210, 235, 0.3) !important;
}

.count /deep/ .el-table,
.el-table__expanded-cell {
    background-color: transparent;
}

.count /deep/ .el-table th {
    color: #fefefe;
    background-color: rgba(255, 255, 255, 0);
    font-size: medium;
}

.count /deep/ .el-table tr {
    color: #73eaff;
    background-color: transparent !important;
    font-size: larger;

}

.count /deep/ .el-table__body tr:hover>td {
    background-color: rgba(255, 255, 255, 0) !important;
}
</style>